<template>
	<view>
		<view class="title">{{ htmlString.noticeTitle }}</view>
		<view class="article-meta">
			<text class="article-author">{{ htmlString.userId }}</text>
			<text class="article-time">{{ htmlString.createTime }}</text>
		</view>
		<view class="article-content"><rich-text :nodes="htmlString.content"></rich-text></view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import { formatTimeToStr } from '../../components/date.js';
export default {
	data() {
		return {
			htmlString: {}
		};
	},
	computed: mapState(['URL']),
	onLoad(event) {
		this.getDetail(event.xqId);
	},
	methods: {
		getDetail(res) {
			let data = {
				noticeId: res
			};
			uni.request({
				url: this.URL + 'notice/getNoticeDetail',
				data: data,
				success: res => {
					this.htmlString = res.data.data;
						this.htmlString.createTime = formatTimeToStr(
							this.htmlString.createTime,
							'yyyy-MM-dd'
						);
					console.log(this.htmlString);
				},
				fail: () => {
					console.log('fail');
				}
			});
		}
	}
};
</script>

<style>
.title {
	width: 750upx;
	text-align: center;
	font-size: 40upx;
}
.article-meta {
	justify-content: space-between;
	padding: 20upx 40upx;
	display: flex;
	flex-direction: row;
	color: gray;
}

.article-text {
	font-size: 26upx;
	line-height: 50upx;
	margin: 0 20upx;
}

.article-author,
.article-time {
	font-size: 30upx;
}

.article-content {
	padding: 0 30upx;
	overflow: hidden;
	font-size: 30upx;
	margin-bottom: 30upx;
}
uni-rich-text {
	text-indent: 2em;
}
</style>
